<template>
    <div class="captcha_box">
        <div>
            <div>
                <headerView class="header"></headerView>
            </div>
            <div class="box">
                <van-cell class="text" center title="商家开店" label="未注册的手机号验证通过后自动创建帐号" />
                <div class="inputBox">
                    <div class="tel">
                        <button @click="changeTel">账号&nbsp;&nbsp;&nbsp;&nbsp;
                            <span>{{code}}</span>
                            <van-icon name="arrow-down" />
                        </button>
                        <input type="tel" placeholder="请输入手机号码" @blur="verifyNum" v-model="phoneNumber">
                    </div>
                    <div class="yanZ">
                        <van-field v-model="sms" center clearable label="验证码" placeholder="请输入短信验证码">
                            <template #button>
                                <van-button round plain color="#ff6357" size="small" type="primary" @click="sendSms" :disabled="!SendState">
                                    <span v-if="SendState">发送验证码</span>
                                    <span class="time" v-else>
                                        <span>从新发送:</span>
                                        <van-count-down :time="time" format="ss" @finish="SendState = true" />
                                    </span>
                                </van-button>
                            </template>
                        </van-field>
                    </div>
                </div>
                <!-- 同意用户协议 -->
                <div class="gree_box">
                    <input type="radio" name="gree" @click="changeGree">
                    <span class="gree_text">
                        <span class="text1">我已阅读并同意签署</span>
                        <router-link to="/userAgreement">
                            <span class="text2">《用户协议》</span>
                        </router-link>
                        <router-link to="/PrivacyPolicy">
                            <span class="text2">《隐私政策》</span>
                        </router-link>
                    </span>
                </div>
                <!-- 我要开店按钮 -->
                <van-button round class="btn" :disabled="checkedState" @click="goShop">我要开店</van-button>
                <!-- 已有账号去登录 -->
                <div class="goLogin">
                    <span>已有账号，
                        <router-link to="/captchaLogin">
                            <span class="goBtn">
                                去登录
                                <van-icon name="arrow" />
                            </span>
                        </router-link>
                    </span>
                </div>
            </div>
        </div>
        <div class="help_box">
            <span class="goHelp">
                <router-link to="/SetShopHelp">
                    <van-icon name="question-o" />
                    <span>开店帮助</span>
                </router-link>
            </span>
        </div>
    </div>
</template>

<script>
import { Notify, Toast } from 'vant';
import headerView from "../../components/headerView.vue";
import Vue from 'vue';
import { SendVerificationCode, VerificationCode } from "../../https/loginApi";

Vue.use(Toast);
export default {
    components: { headerView },
    name: "TelAndCaptcha",
    data() {
        return {
            phoneNumber: "",  // 电话号码
            sms: "",   // 验证码
            checkedState: true,
            code: "", //区号
            SendState: true, // 发送验证码的状态
            time: 51000  //验证码倒计时

        }
    },
    created() {
        this.code = this.$store.state.login.areaCode
    },
    methods: {
        // 同意协议
        changeGree() {
            this.checkedState = !event.target.checked
        },
        // 点击按钮:去开店/跳转页面
        goShop() {
            if (this.sms) {
                // 验证码登录
                VerificationCode(this.value)  // 验证验证码是否正确的请求
                    .then((res) => {
                        console.log('登陆成功：', res)
                        this.$router.push('/ProcessReminder')
                    })
                    .catch((err) => {
                        console.log(err)
                        Notify({ type: 'danger', message: '验证码错误' });
                    })
            }
            this.$router.push('/ProcessReminder')
        },
        // 选择区号
        changeTel() {
            this.$router.push('/SelectTel')
        },
        // 发送验证码
        sendSms() {
            // 发送短信验证码
            let pattern = /0?(13|14|15|18|17)[0-9]{9}/
            if (pattern.test(this.phoneNumber)) {
                let number = this.code + this.phoneNumber
                this.SendState = false
                SendVerificationCode(number)
                    .then((res) => {
                        console.log('验证码发送成功', res)
                        this.checkedState = false
                    })
                    .catch((err) => {
                        console.log(err)
                        Notify({ type: 'danger', message: '验证码发送失败'});
                    })
                return
            }
            Notify({ type: 'danger', message: '账号不符合规则' });
            this.checkedState = true
        },
        // 手机号码输入框失去焦点
        verifyNum() {
            let pattern = /0?(13|14|15|18|17)[0-9]{9}/
            if (!pattern.test(this.phoneNumber)) {
                Notify({ type: 'danger', message: '账号不符合规则' });
            }
        },
        
    }
}
</script>

<style scoped>
.captcha_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 667px;
}

.header {
    background-color: #ffff;
    color: #000;
}

.box {
    width: 90%;
    margin: 0 auto;
}

.text {
    font-size: 24px;
}

.yanZ {
    border-bottom: 1px solid #cfccd6;
}


.tel {
    width: 100%;
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #cfccd6;
}

.tel button {
    width: 35%;
    text-align: left;
    font-size: 15px;
    margin: 0;
    border: none;
    padding: 6px 0;
    padding-left: 15px;
    background-color: #ffff;
}

.tel input {
    font-size: 15px;
    width: 60%;
    border: none;
}

input::placeholder {
    color: #cfccd6;
    font-size: 15px;
    text-align: left;
}

/* 同意协议 */
.gree_box {
    padding: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

.text1 {
    color: #a8a7a9;
}

.text2 {
    color: #ff6e53;
    font-size: 15px;
}

/* 我要开店按钮 */
.btn {
    width: 100%;
    background-color: #ff6e53;
    text-align: center;
    color: #ffff;
    font-size: 16px;
}

/* 已有账号去登录 */
.goLogin {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
    margin: 20px 0;
}

.goBtn {
    color: #ff6e53;
}

/* 开店帮助 */
.help_box {
    height: 50px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.goHelp {
    font-size: 15px;
    color: #a8a7a9;
}

.goHelp span {
    font-size: 15px;
    color: #8e8e8f;
}

.time {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #929395;
}

.time span {
    font-size: 12px;
}
</style>
